<template>
  <div class="shopcar-container">
    <van-swipe-cell v-for="item in carList" :key="item.id">
      <div class="shopcart-box">
        <van-checkbox
          v-model="item.checked"
          @click.stop="change"
          checked-color="#F63515"
        ></van-checkbox>
        <div class="cell" @click="toDeailPage(item,$event)">
          <img :src="item.imageHost + item.mainImage" />
          <div class="shopcart-item-info">
            <p class="shopcart-name">{{ item.name }}</p>
            <p class="shopcart-subtitle">{{ item.subtitle }}</p>
            <div class="shopcart-stepper">
              <span class="shopcart-price">￥{{ item.price }}</span>
              <van-stepper
                v-model="item.count"
                @plus="plus(item)"
                @minus="minus(item)"
                min="1"
                max="9999"
              />
            </div>
          </div>
        </div>
      </div>
      <template slot="right">
        <van-button square type="danger" text="删除" @click="delpro(item)" />
      </template>
    </van-swipe-cell>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { carAdd, getCarInfo, carDel } from "../../api/index";
export default {
  data() {
    return {
      // checked: false,
      value: 1,
    };
  },
  computed: {
    ...mapState(["carList"]),
  },
  methods: {
    plus(item) {
      // console.log($el);
      let params = {
        productId: item.productId,
        count: 1,
      };
      carAdd(params, () => {
        getCarInfo((res) => {
          this.$store.commit("saveCarInfo", res.data);
        });
      });
    },
    minus(item) {
      let params = {
        productId: item.productId,
        count: -1,
      };
      carAdd(params, () => {
        getCarInfo((res) => {
          this.$store.commit("saveCarInfo", res.data);
        });
      });
    },
    change() {
      this.$store.dispatch("singleChange");
    },
    delpro(item) {
      carDel({ id: item.id }, (res) => {
        console.log(res);
      });
      this.$store.dispatch("getcars");
    },
    toDeailPage(item,e) {
      console.log(e.target);
      if(e.target.className.indexOf("stepper") === -1){
        this.$router.push("/product/" + item.productId);
      }
      
    },
  },
};
</script>

<style lang="scss" scoped>
.shopcar-container {
  .shopcart-box {
    display: flex;
    justify-content: space-around;
    background: #fff;
    padding: 10px;
    margin: 10px 0;
    height: 200px;
    .van-checkbox{
      width: 15%;
    }
    img {
      width: 180px;
      height: 180px;
      margin: 0 10px;
    }

    .shopcart-item-info {
      display: flex;
      flex: 70%;
      flex-direction: column;
      justify-content: space-between;

      .shopcart-name {
        height: 70px;
        font-size: 26px;
        overflow: hidden;
      }

      .shopcart-subtitle {
        font-size: 24px;
        color: #999;
      }

      .shopcart-stepper {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .shopcart-price {
          font-size: 30px;
          color: red;
        }
      }
    }
  }
  .van-button {
    height: 200px;
  }
  .cell{
    display: flex;
  }
}
</style>